<template>
	<view class="content">
		<!-- #ifdef MP -->
		<!-- 搜索栏 -->
		<search-slot class="search">
			<!-- <view class="search d-flex"> -->
			<view class="left" slot="left">
				<text class="iconfont icon-xiaoxi"></text>
			</view>
			<view class="center" slot="center">
				<text class="iconfont icon-sousuo"></text>
				智能积木
			</view>
			<view class="right" slot="right" @click="sancode">
				<text class="iconfont icon-richscan_icon"></text>
			</view>
			<view class="">111</view>
			<!-- </view> -->
		</search-slot>
		<!-- #endif -->
		<!-- 导航栏 -->
		<view style="width: 100%;height: 60rpx;line-height:60rpx;background-color: #F0AD4E;text-align: left;">{{address}}</view>
		<scroll-view class="scroll-view_H scroll-row" scroll-x="true" :scroll-into-view="scrollinto">
			<view id="demo1" class="scroll-view-item_H  view-height">
				<text :class="{active:index=== currentIndex}" class="mx-1" v-for="(item,index) in tabbar" :key="index"
					@click="changeIndex(index)" :id="'tab'+index">{{item.title}}</text>
			</view>
		</scroll-view>
		<!-- 可滚动区域 -->
		<swiper :indicator-dots="false" :style="'height:'+scrollH" class="w-100" :current="currentIndex"
			@change="changeTab">
			<block v-for="(newslist,index) in newsItems" :key="index">
				<swiper-item>
					<view class="swiper-item">
						<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" :style="'height:'+scrollH"
							@scrolltolower="scrolltolower(index)">
							<!-- <view id="demo1" class="scroll-view-item uni-bg-red" v-for="i in 100" :key="i">{{i}}</view> -->
							<template v-if="newslist.list.length>0">
								<block v-for="(home,i) in newslist.list" :key="i">
									<!-- 轮播图 -->
									<swiper-banner v-if="home.type == 'swiper'" :swipers="home.data"></swiper-banner>
									<!-- 金刚区 -->
									<fast-nav v-else-if="home.type == 'indexnavs'" :pages="pages"></fast-nav>
									<!-- 三图广告 -->
									<three-adv v-else-if="home.type == 'threeAdv'" :threeadv="home"></three-adv>
									<!-- 一图广告 -->
									<one-adv v-else-if="home.type == 'oneAdv'" :headerTitle="home.data.title"
										cover="../../static/images/demo/demo4.jpg"></one-adv>
									<!-- 列表流 -->
									<common-list v-else-if="home.type == 'list'" :listData="home"></common-list>
								</block>
								<view class="loadmore">{{newslist.loadtext}}</view> <!-- 第二步 -->
							</template>
							<template v-else-if="newsItems[currentIndex].forward === 'before'">
								<view class="loadmore">正在加载中…</view>
							</template>
							<template v-else>
								<view class="loadmore">暂无数据</view>
							</template>
						</scroll-view>
					</view>
				</swiper-item>
			</block>
		</swiper>
		<!-- <view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" :style="'height:'+scrollH">
				<view id="demo1" class="scroll-view-item uni-bg-red" v-for="i in 100" :key="i">{{i}}</view>
			</scroll-view>
		</view> -->
	</view>
</template>

<script>
	import {
		getHome,
		getPage
	} from '../../utils/home.js'
	var QQMapWX = require('../../common/lib/qqmap-wx-jssdk.min.js');
	export default {
		data() {
			return {
				scrollTop: 0, //竖向滚动条的位置
				scrollH: '0',
				scrollinto: '',
				currentIndex: 0,
				tabbar: [],
				newsItems: [],
				qqmapsdk: {},
				address:''
			}
		},
		onLoad() {
			this.qqmapsdk = new QQMapWX({
				key: 'GCEBZ-5SC6J-O4VFC-FVQWZ-7R2H7-DKBG4'
			});
			uni.getLocation({
				type: 'gcj02',
				success: () => {
					/* console.log(res);
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude); */
					 this.qqmapsdk.reverseGeocoder({
						 success:(res)=>{
							 console.log(res);
							  this.address = res.result.address 
						 }
					 })
				},
				fail:(err) =>{
					console.log(err);
				}
			})
		},
		methods: {
			//获取首页分类数据
			gethome() {
				getHome().then(res => {
					/* console.log(res); */
					this.tabbar = res.data.category
					this.tabbar = res.data.category.map(v => {
						return {
							id: v.id,
							title: v.name,
							order: v.order,
							template: v.template
						}
					})
					this.initData(res)
				})
			},
			initData(res) { //初始化首页数据
				let arr = []
				for (let i = 0; i < this.tabbar.length; i++) {
					let forward = i === 0 ? 'after' : 'before'
					var obj = {
						list: [],
						loadtext: '加载更多…', //第一步:确保每一个页面下面都有加载更多
						forward: forward
					}
					if (i == 0) {
						obj.list = res.data.data
					}
					arr.push(obj)
				}
				this.newsItems = arr
				/* console.log(this.newsItems); */
			},
			//点击切换tabbar标题
			changeIndex(index) {
				this.currentIndex = index
				this.scrollinto = 'tab' + index //点击时让tabbar自动向右滚动
				if (this.currentIndex < 6) {
					this.scrollinto = 'tab0' //击时让tabbar自动向左滚动
				}
			},
			changeTab(e) {
				this.currentIndex = e.detail.current
				if (this.newsItems[this.currentIndex].forward === 'after') {
					return
				} else {
					this.getMore()
				}
			},
			sancode() {
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					},
					fail: function(error) {
						console.log(error);
					}
				});
			},
			getMore(callback) { //第六步
				let index = this.currentIndex
				let id = this.tabbar[index].id
				let obj = this.newsItems[index]
				let page = Math.ceil(obj.list.length / 5) + 1
				obj.forward = 'before'
				getPage(id, page).then(res => { //第七步
					console.log(res);
					let data = res.data
					if (data) {
						obj.loadtext = data.length < 5 ? '没有更多了…' : '加载更多…'
					}
					setTimeout(() => {
						obj.list = [...obj.list, ...data]
						obj.forward = 'after'
					}, 1000)
				})

				if (typeof callback == 'function') {
					callback()
				}
			},
			//触底事件
			scrolltolower(index) { //第三步
				if (this.newsItems[index].loadtext != '加载更多…') { //加载更多 加载中 没有更多了
					return;
				} else {
					this.newsItems[index].loadtext = '加载中…' //第四步
					setTimeout(() => {
						this.getMore(() => { //第五步
							uni.showToast({
								title: '加载成功'
							})
						})
					}, 2000)
				}
			}
		},
		computed: {
			pages() {
				let pagge = []
				let index = this.currentIndex
				if (this.newsItems[index]) {
					this.newsItems[index].list.forEach(item => {
						if (item.type == 'indexnavs') {
							let indexnavs = Object.values(item.data)
							indexnavs.forEach((v, i) => {
								var page = Math.floor(i / 8)
								if (!pagge[page]) {
									pagge[page] = []
								}
								pagge[page].push(v)
							})
						}
					})
				}
				return pagge
			}
		},
		mounted() {
			this.gethome()
			uni.getSystemInfo({ //系统信息
				success: (res) => {
					this.scrollH = res.windowHeight - uni.upx2px(148) + 'px'; //rpx转化为px
				}
			})
		}

	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.view-height {
		height: 88rpx;
		line-height: 88rpx;
	}

	.active {
		color: #f60;
		border-bottom: 4rpx solid #f60;
	}

	.search view {
		height: 60rpx;
		line-height: 60rpx;
	}

	.center {
		width: 600rpx;
		background-color: #eee;
		text-align: center;
		color: #ccc;
		margin: 0 10rpx;
	}

	.loadmore {
		text-align: center;
		font-size: 30rpx;
	}
</style>
